<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .outerBox {
            margin: 100px auto;
            width: 350px;
            height: 500px;
        }

        .outerBox .hotTitle {
            width: 100%;
            height: 80px;
            line-height: 80px;
        }

        .outerBox .hotTitle h2 {
            float: left;
        }

        .outerBox .hotTitle h2 span {
            color: gray;
        }

        .outerBox .hotTitle .change {
            float: right;
            color: gray;
            background-color: white;
            cursor: pointer;
        }

        .outerBox .hotList ol{
            margin-left: 20px;
        }

        .outerBox .hotList ol li{
            margin-bottom: 5px;
            color: blue;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="outerBox">
        <div class="hotTitle">
            <h2>百度热搜 <span>&gt;</span></h2>
            <div class="change">☯换一换</div>
        </div>
        <div class="hotList">
            <ol></ol>
        </div>
    </div>
</body>

</html>

<script>

    class BaiduHot {
        constructor(hots) {
            this.hotlist = document.querySelector('.hotList ol');
            this.hots = hots;
            this.lis = ``;
            this.change = document.querySelector('.change');
            this.num = 0;


            this.render();
            this.bindEvent();
        }

        render() {
            this.lis = this.hots[this.num].map((item)=>{return `<li>${item}</li>`}).join('');
            this.hotlist.innerHTML = this.lis;
        }

        bindEvent(){
            this.change.onclick = () => {
                this.num++;
                if(this.num >= this.hots.length){this.num = 0}
                this.render();
            }
        }
    }


    let hots = [
        [
            '继续为各国来华投资提供便利',
            '乌市一方舱有卖淫嫖?警方回应',
            '继续为各国来华投资提供便利',
            '乌市一方舱有卖淫嫖?警方回应',
            '继续为各国来华投资提供便利',
            '乌市一方舱有卖淫嫖?警方回应',
            '继续为各国来华投资提供便利',
            '乌市一方舱有卖淫嫖?警方回应',
            '继续为各国来华投资提供便利',
            '乌市一方舱有卖淫嫖?警方回应',
            '继续为各国来华投资提供便利',
            '乌市一方舱有卖淫嫖?警方回应',
            '继续为各国来华投资提供便利',
            '乌市一方舱有卖淫嫖?警方回应',
        ],
        [
        '红月亮遇上月掩天王星',
        '前10个月进出口同比增长9.5%',
        '湖南-中学多名学生感染校长被免职',
        '湖南-中学多名学生感染校长被免职',
        '前10个月进出口同比增长9.5%',
        '湖南-中学多名学生感染校长被免职',
        '前10个月进出口同比增长9.5%',
        '湖南-中学多名学生感染校长被免职',
        '前10个月进出口同比增长9.5%',
        '湖南-中学多名学生感染校长被免职',
        '前10个月进出口同比增长9.5%',
        '湖南-中学多名学生感染校长被免职',
        '前10个月进出口同比增长9.5%',
        '湖南-中学多名学生感染校长被免职',
        ]
    ]

    new BaiduHot(hots);
</script>